<template>
     <div class="ele-full-screen">
        <i v-if="isFull" @click="full(1)" class="ele-icon ele-icon-fullscreen-expand"></i>
        <i v-else @click="full(2)" class="ele-icon ele-icon-fullscreen-shrink"></i>
     </div>
</template>
<script setup lang="ts">
import { ref } from '@vue/runtime-core'

const isFull = ref(true)

const full = function (num : number) {
  num = num || 1
  num = num * 1
  var docElm = document.documentElement
  switch (num) {
    case 1:
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } 
      break
    case 2:
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } 
      break
  }
  isFull.value = !isFull.value
}
</script>